<template>
  <base-paenl>
    <span slot="header">{{
      areaType == "grid" ? "网格信息" : "行政区信息"
    }}</span>
    <div slot="main" class="slot-main">
      <div
        v-for="(item, index) of dataList"
        :key="index"
        :class="
          item.name == '房管员数量'
            ? 'panel-item panel-item-click'
            : 'panel-item'
        "
        @click="goToGridman(item)"
      >
        <div class="panel-row">
          <div class="panel-row-bg"></div>
          <div class="panel-row-content">
            <div class="panel-row-content-name" :title="item.name">
              {{ item.name }}
              <img
                v-if="item.iconShow"
                src="../../assets/images/panels/wenhaotubiao.png"
                width="14px"
                height="14px"
                style="cursor: pointer;"
                @click="showDialog"
              />
            </div>
            <div class="panel-row-content-value" :title="item.value">
              {{ item.value }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </base-paenl>
</template>

<script lang="ts">
import { Vue, Component, Watch } from "vue-property-decorator";
import BasePaenl from "./CBase.vue";
import { getGridInfo } from "@/assets/modules/service";
// import * as _ from "lodash";
@Component({
  name: "GridInformation",
  components: { BasePaenl }
})
export default class extends Vue {
  get areaType() {
    return this.$store.getters["panelData/areaType"];
  }
  @Watch("areaType")
  handleAreaType() {
    if (this.areaType == "administrative") {
      const win: any = window;
      this.dataList = win.dataConfig.information.administrative;
      this.getGridInfo();
    } else {
      const win: any = window;
      this.dataList = win.dataConfig.information.grid;
      this.getGridInfo();
    }
  }
  get datePickerValue() {
    return this.$store.getters["panelData/datePickerValue"];
  }
  get areaData() {
    return this.$store.getters["panelData/areaData"];
  }
  @Watch("areaData", { deep: true })
  handleAreaData() {
    this.getGridInfo();
  }
  dataList: any = [];
  gridRangeData: any = {};
  mounted() {
    const win: any = window;
    this.dataList = win.dataConfig.information.grid;
    this.gridRangeData = win.dataConfig.information.gridRange;
  }
  // test() {
  //   const func = this.debounce(
  //     () => {
  //       console.log("ssss11111");
  //     },
  //     100,
  //     true
  //   );
  //   console.log(func);
  // }
  getGridInfo() {
    const data: any = {
      dataTime: this.datePickerValue,
      code: this.areaData.areaCode,
      gridId: this.areaData.gridId,
      queryType: this.areaData.queryType,
      sqCodeList: this.areaData.sqCodeList,
      geoJson: this.areaData.geoJson,
      areaType: this.areaData.areaType,
      areaName: this.areaData.areaName
    };
    getGridInfo(data).then((res: any) => {
      if (res?.data) {
        if (data.queryType == 1) {
          this.dataList.name.name == "网格名称";
          this.dataList.name.value = res.data.xzqmc;
          this.dataList.dept.value = res.data.ssbm;
          this.dataList.fanwei.value = res.data.wgfw;
          this.dataList.wgsl.value = res.data.wgCount;
          if (data.areaType == 2) {
            if (res.data.wgList && res.data.wgList.length > 0) {
              this.dataList.fanwei.value =
                res.data.wgList[0].gridId + "：  " + res.data.wgfw;
            }
          }
        } else {
          this.dataList.name.name == "行政区名称";
          this.dataList.name.value = this.areaData.areaName;
          if (data.areaType == 0) {
            this.dataList.dept.value = "厦门市住房保障和房屋管理局";
            this.dataList.fanwei.value = "全市";
          } else {
            this.dataList.dept.value =
              this.areaData.qjmc.substring(0, 2) + "分中心";
            this.dataList.fanwei.value = res.data.wgfw;
          }
        }
        this.dataList.wanggeyuanshuliang.value = res.data.wgysl;
        const gridList: any[] = [];
        if (res.data.wgList && res.data.wgList.length > 0) {
          for (let i = 0; i < res.data.wgList.length; i++) {
            const item = res.data.wgList[i];
            item.region = item.ssfzx.substring(0, 2) + "区";
            item.sqCount = item.fuzeSqcj.split("、").length;
            gridList.push(item);
          }
        }
        this.gridRangeData = {
          name: this.dataList.name.value,
          list: gridList
        };
      }
    });
  }
  showDialog() {
    if (
      parseInt(this.datePickerValue.substring(4, 6)) <
        new Date().getMonth() + 1 ||
      this.areaData.areaType == 0
    ) {
    } else {
      this.$store.commit("panel/setDialogShow", true);
      this.$store.commit("panel/setDialog", "GridInformation");
      this.$store.commit("panelData/setGridRangeData", this.gridRangeData);
    }
  }
  goToGridman(item: any) {
    const target = "gridman";
    if (item.name == "房管员数量") {
      this.$store.commit("panel/setRightPanelShow", false);
      this.$store.commit("panel/setDatePickerShow", false);
      this.$store.commit("panel/setDialogShow", false);
      this.$store.commit("panel/setLeftPanel", target);
      this.$store.commit("panel/setRightPanel", target);
      this.$store.commit("panel/setBottomPanel", target);
      this.$store.commit("handler/setTarget", target + "-handler");
      this.$store.commit("view/setRestoration", true);
      this.$store.commit("panel/setDialogShow", false);
    }
  }
  // debounce(func: Function, wait: number, immediate: boolean) {
  //   let timeout: any, args: any, context: any, timestamp: any, result: any;
  //   const that: any = this;
  //   const later = function() {
  //     // 据上一次触发时间间隔
  //     const last = +new Date() - timestamp;

  //     // 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait
  //     if (last < wait && last > 0) {
  //       timeout = setTimeout(later, wait - last);
  //     } else {
  //       timeout = null;
  //       // 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
  //       if (!immediate) {
  //         result = func.apply(context, args);
  //         if (!timeout) context = args = null;
  //       }
  //     }
  //   };
  //   return function(...args: any): any {
  //     context = that;
  //     timestamp = +new Date();
  //     const callNow = immediate && !timeout;
  //     // 如果延时不存在，重新设定延时

  //     if (!timeout) timeout = setTimeout(later, wait);
  //     if (callNow) {
  //       result = func.apply(context, args);
  //       context = args = null;
  //     }
  //     return result;
  //   };
  // }
}
</script>

<style lang="scss" scoped>
.slot-main {
  height: 165px;
}
</style>
<style lang="scss">
.panel-item {
  margin: 0 0 10px 0;
  .panel-row {
    position: relative;
    width: 404px;
    height: 27px;
    .panel-row-bg {
      position: absolute;
      width: 404px;
      height: 16px;
      background-image: url(../../assets/images/panels/liebiaoshuangtiaokuang.png);
      background-size: 100% 100%;
      opacity: 0.5;
      margin-top: 9px;
    }
    .panel-row-content {
      position: absolute;
      top: 0;
      left: 20px;
      width: 384px;
      height: 14px;
      display: flex;
    }
    .panel-row-content-name {
      width: 140px;
      height: 20px;
      font-family: AlibabaPuHuiTi_2_55_Regular;
      font-size: 14px;
      line-height: 20px;
      color: #b4d8f7;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .panel-row-content-name1 {
      font-family: AlibabaPuHuiTi_2_75_SemiBold;
      color: #ffffff;
    }
    .panel-row-content-value {
      width: 230px;
      height: 20px;
      font-family: AlibabaPuHuiTi_2_75_SemiBold;
      font-size: 14px;
      line-height: 20px;
      color: #ffffff;
      text-align: right;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .panel-row-content-value1 {
      font-family: AlibabaPuHuiTi_2_85_Bold;
      color: #3998ff;
    }
  }
  .panel-second-row {
    width: 394px;
    background: rgba(0, 60, 107, 0.25);
    display: flex;
    flex-wrap: wrap;
    .panel-second-content {
      display: flex;
      align-items: center;
      padding-left: 20px;
      height: 30px;
    }
    .panel-second-content1 {
      width: 50%;
    }
    .panel-second-content-name {
      font-family: AlibabaPuHuiTi_2_55_Regular;
      font-size: 14px;
      line-height: 19px;
      color: #b4d8f7;
      margin-left: 5px;
    }
    .panel-second-content-value {
      font-family: AlibabaPuHuiTi_2_85_Bold;
      font-size: 14px;
      line-height: 22px;
      color: #fad06d;
    }
  }
  .panel-second-row2 {
    width: 394px;
    height: 15px;
    display: flex;
    .panel-second-content {
      display: flex;
      align-items: center;
      width: 131px;
      padding-left: 20px;
    }
    .panel-second-content-name {
      font-family: AlibabaPuHuiTi_2_55_Regular;
      font-size: 14px;
      line-height: 17px;
      color: #b4d8f7;
      margin-left: 5px;
    }
    .panel-second-content-value {
      font-family: AlibabaPuHuiTi_2_55_Regular;
      font-size: 14px;
      line-height: 17px;
      color: #3998ff;
    }
  }
  .panel-second-row3 {
    width: 394px;
    height: 25px;
    display: flex;
    .panel-second-content {
      display: flex;
      align-items: center;
      padding-left: 5px;
    }
    .panel-second-content-name {
      font-family: AlibabaPuHuiTi_2_55_Regular;
      font-size: 14px;
      line-height: 17px;
      color: #b4d8f7;
      margin-left: 5px;
    }
    .panel-second-content-value {
      font-family: AlibabaPuHuiTi_2_85_Bold;
      font-size: 14px;
      line-height: 22px;
      color: #fad06d;
    }
  }
}
.panel-item-click {
  cursor: pointer;
}
.panel-message {
  font-family: AlibabaPuHuiTi_2_55_Regular;
  font-size: 16px;
  color: #ffffff;
}
</style>
